<template>
	<div class="table-wraper">
		<!-- <baseTable></baseTable> -->
		<div class="opearate-bar">
			<a-button
				type="primary"
				@click="zoomToFit"
			>zoom to fit</a-button>
			<a-button @click="centerToRoot">center on root</a-button>
		</div>
		<div id="myDiagramDiv"></div>
		<div id="myOverviewDiv"></div>

		<!-- <button @click="toBig">放大</button>
		<button @click="toSmall">缩小</button>
		<button @click="toFilt">自动</button> -->
	</div>
</template>

<script>
	import go from "gojs";

	export default {
		data() {
			return {
				loading: false,
				myDiagram: null,
			};
		},
		components: {},
		methods: {
			drawTopology() {
				var $ = go.GraphObject.make; // for conciseness in defining templates

				// instance to myDiagram
				this.myDiagram = $(go.Diagram, "myDiagramDiv", {
					"undoManager.isEnabled": true, // enable undo & redo
					isReadOnly: true, // don't allow move or delete
					scrollMode: go.Diagram.InfiniteScroll, // allow the diagram to be scrolled beyond content
					padding: 0, // scales should be allowed right up against the edges of the viewport
					"grid.visible": true, // show that the ticks of the rulers always line up with the grid lines
					initialContentAlignment: go.Spot.Center, //启动视口中间的所有内容
					"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
					layout: $(go.LayeredDigraphLayout, {
						direction: 0,
						layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
					}),
				});

				// define tooltips for nodes
				var tooltiptemplate = $(
					"ToolTip",
					{ "Border.fill": "whitesmoke", "Border.stroke": "#ddd" },
					$(
						go.TextBlock,
						{
							font: "bold 8pt Helvetica, bold Arial, sans-serif",
							wrap: go.TextBlock.WrapFit,
							margin: 5,
						},
						new go.Binding("text", "", tooltipTextConverter)
					)
				);

				// get tooltip text from the object's data
				function tooltipTextConverter(person) {
					return "Name: " + person.key;
				}
				function deepClone (newObj , oldObj) {
					// let obj ={}
					for( let key in oldObj ) {
						let item = oldObj[key];
						if(item instanceof Array) {
							deepClone(newObj[key] ,item)
						}else if (item instanceof Object) {
							deepClone(newObj[key] ,item)
						}else {
							newObj[key] = item;
						}
					}
					return newObj;
				}
					
				deepClone( )

				// 节点
				this.myDiagram.nodeTemplate = $(
					go.Node,
					"Auto",
					{ deletable: false, toolTip: tooltiptemplate },
					{ click: this.nodeClick }, // this event handler is defined below
					{
						locationSpot: go.Spot.TopCenter,
						isShadowed: true,
						shadowBlur: 1,
						shadowOffset: new go.Point(0, 1),
						shadowColor: "rgba(0, 0, 0, .14)",
						selectionAdornmentTemplate: $(
							go.Adornment,
							"Auto",
							$(
								go.Shape,
								"RoundedRectangle",
								{
									parameter1: 2, // set the rounded corner
									spot1: go.Spot.TopLeft,
									spot2: go.Spot.BottomRight, // make content go all the way to inside edges of rounded corners
								},
								{
									fill: null,
									stroke: "blue",
									strokeWidth: 3,
								}
							),
							$(go.Placeholder)
						), // end Adornment
					},
					$(
						go.Shape,
						"RoundedRectangle",
						{ strokeWidth: 0, portId: "", fromLinkable: true, toLinkable: true },
						new go.Binding("fill", "color")
					),
					$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")),
					$("TreeExpanderButton")
				);

				// 连线
				this.myDiagram.linkTemplate = $(
					go.Link,
					{ selectable: false },
					$(go.Shape)
				); // the link shape

				// 数据
				this.myDiagram.model = new go.GraphLinksModel(
					this.nodeData,
					this.edgsData
				);

				// overview 鹰眼图
				$(go.Overview, "myOverviewDiv", {
					observed: this.myDiagram,
					contentAlignment: go.Spot.Center,
				});
			},

			nodeClick(e, node) {
				console.log(`点击了${node.data.key}节点`);
				this.nodeData.push({
					key: `new node  ${this.nodeData.length}`,
					color: "yellow",
				});
				console.log(this.nodeData);
			},
			centerToRoot() {
				// TODO: findNodeForKey找到指定节点, actualBounds 设置为中心
				this.myDiagram.scale = 1;
				this.myDiagram.scrollToRect(
					this.myDiagram.findNodeForKey("Gamma").actualBounds
				);
			},
			zoomToFit() {
				this.myDiagram.commandHandler.zoomToFit();
			},
			initData() {
				this.nodeData = [
					{ key: "Alpha", color: "lightblue" },
					{ key: "Beta", color: "orange" },
					{ key: "Gamma", color: "lightgreen" },
					{ key: "Delta", color: "pink" },
				];
				this.edgsData = [
					{ from: "Alpha", to: "Beta" },
					{ from: "Alpha", to: "Gamma" },
					{ from: "Beta", to: "Beta" },
					{ from: "Gamma", to: "Delta" },
					{ from: "Delta", to: "Alpha" },
				];
				this.drawTopology();
			},
		},
		mounted() {
			this.initData();
			console.log(go);
		},
	};
</script>

<style scoped lang="less">
	.table-wraper {
		background-color: #fff;
		border: 1px solid red;
		width: 100%;
		height: 100%;
		position: relative;

		.opearate-bar {
			padding: 10px;
			display: flex;
			justify-content: flex-end;

			.ant-btn {
				margin-left: 10px;
			}
		}

		#myDiagramDiv {
			width: 100%;
			height: calc(100% - 80px);
			background-color: #ddd;
		}
		#myOverviewDiv {
			position: absolute;
			width: 200px;
			height: 100px;
			top: 60px;
			left: 0;
			background-color: #f2f2f2;
			z-index: 300; /* make sure its in front */
			border: solid 1px #7986cb;
		}
	}
</style>